<template>
  <el-dialog :model-value="show" title="设置排序" @close="$emit('hide')">
    <el-form ref="formRef" :model="form" :rules="rules">
      <el-form-item label="排序" prop="sort">
        <el-input v-model="form.sort" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelFn">取消</el-button>
        <el-button type="primary" @click="submitFn">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { updateBrandSortApi } from "../api";
import { ElMessage, ElMessageBox } from "element-plus";

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  id: {
    type: Number,
    default: 0,
  },
  sort: {
    type: Number,
    default: 0,
  },
});
const emit = defineEmits(["hide"]);
watch(
  () => props.sort,
  () => {
    form.value.sort = props.sort;
  }
);
const form = ref({
  sort: 0,
});
const rules = { sort: [{ required: false, message: "", trigger: "blur" }] };

//取消按钮
const cancelFn = () => {
  emit("hide");
};
//提交按钮
const submitFn = () => {
  ElMessageBox.confirm("确定要修改吗？", "修改排序", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      updateBrandSortApi(props.id, form.value.sort).then((res) => {
        if (res.code === 200) {
          ElMessage.success("修改成功");
          emit("hide", true);
        }
      });
    })
    .catch(() => {});
};
</script>
<style lang="less" scoped></style>
